<!-- src/packageG/pages/car/index.vue -->
<template>
  <view class="carIndex">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <u-loading mode="circle" size="50"></u-loading>
      <text style="margin-left: 20rpx">加载中...</text>
    </view>

    <!-- 无数据状态 -->
    <noData v-else-if="!cartList.length" />

    <!-- 有数据状态 -->
    <carList
      :tabberStatus="props.tabberStatus"
      @refreshCarList="getCarList"
      :cartList="cartList"
      v-else
    ></carList>
  </view>
</template>

<script setup lang="ts">
import { onActivated, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
//组件
import noData from './noData.vue'
import carList from './carList.vue'
//api
import { productApi, orderApi, baseApi } from '@/api'
//store
import { useUserStore } from '@/store'

//初始数据
const props = defineProps({
  tabberStatus: {
    type: Boolean,
    default: false
  }
})

const storeUser = useUserStore()
const { hasLogin, userInfo } = storeToRefs(storeUser)
const cartList = ref([])
const loading = ref(true) // 添加加载状态

// 购物车列表
const getCarList = async () => {
  loading.value = true // 开始加载
  try {
    const { data, code } = await productApi.productCartList({
      userId: userInfo.value.id,
      detail: true,
      shopId: 3999,
      noPaging: true
    })
    if (code === 200) {
      cartList.value = data.map((item: any) => {
        return {
          ...item,
          checked: false
        }
      })
    } else {
      cartList.value = []
    }
  } catch (error: any) {
    console.error('获取购物车列表失败:', error.msg)
    cartList.value = []
  } finally {
    loading.value = false // 加载完成
  }
}

onLoad(() => {
  getCarList()
})
</script>

<style lang="scss" scoped>
.carIndex {
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300rpx;
  }
}
</style>
